<script lang="ts">
  export default defineComponent({
    setup: function () {
      const route = useRouter()
      const countDown = ref(5)

      const Iter = setInterval(() => {
        countDown.value--
        if (countDown.value === 0)
          toHomePage()
      },1000)

      function toHomePage(){
        clearInterval(Iter)
        route.push('/home')
      }
      return {
        countDown,
        toHomePage
      }
    }


  })

</script>

<template>
  <div class="main-box">
    <n-result status="404" title="404 资源不存在" :description="'访问的该资源不存在，'+ countDown +'秒后返回主页'">
      <template #footer>
        <n-button @click="toHomePage()">返回主页</n-button>
      </template>
    </n-result>
  </div>
</template>

<style lang="scss" scoped>
  .main-box {
    display: flex;
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);

  }
</style>

<route>
{
  meta: {
    title: '404',
    hidden: true,
    noShowTabbar: true,
  }
}
</route>